<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>{% block title %} OpenID Consumer {% endblock %}</title>
  <link href="/static/base.css" rel="stylesheet" type="text/css"/>
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/tabview/assets/skins/sam/tabview.css">
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/imageloader/imageloader-min.js&2.6.0/build/element/element-beta-min.js&2.6.0/build/tabview/tabview-min.js"></script>

<style type="text/css">
	#MySpaceTabs {
		margin:4em auto;
		min-width:970px;
		width:74.6em;
	}
</style>

</head>

<body class="yui-skin-sam">

<div id="navbar">
   <a href="http://code.google.com/appengine/">
      <img src="/static/appengine_button_noborder.gif"
           style="vertical-align: middle" /></a>
</div>

<div id="header">
  <a href="/"><img id ="openid-logo" alt="OpenID" src="/static/openid-logo.png" /></a> <br/> <br/>
  <p id="title">MySpaceID "Combined Consumer" - Demonstrates usage of MySpaceID, OpenID/oAuth "hybrid" extension and MySpace REST APIs to fetch a MySpace user's data</p>
</div>

<div id="body">

<form method="post" action="/login">
Enter your MySpaceID Below:

<table><tr><td>
<!--  You can also use http://stage-api.myspace.com below -->

<p><input type="text" name="openid" id="openid" size="50" value="http://www.myspace.com/<VANITY_NAME_HERE>" />
<input type="submit" value="Get MySpace Data" /></p>

</td><td>

{% if response %}
  {% ifequal response.status "success" %}
    <span class="success">Success!</span><br />    
  {% else %}
    <span class="cancel">Login cancelled.</span>
  {% endifequal %}

{% else %}{% if error %}
  <span class="error">{{ error }}</span>

{% endif %}{% endif %}
</td></tr></table>

</form>

</div>

{% if profile_data %}
<div id="MySpaceTabs" class="yui-navset">
    <ul class="yui-nav">
        <li id='profileTab' class="selected"><a href="#tab1"><em>Profile</em></a></li>
        <li id='friendsTab'><a href="#tab2"><em>Friends</em></a></li>
        <li id='albumsTab'><a href="#tab3"><em>Albums</em></a></li>
    </ul>            
    <div class="yui-content">
        <div id='profileTabContent'>
            <p><img src="{{profile_data.person.thumbnailUrl }}" border='0' /></p> 
            <p>Profile URL : <a href="{{ profile_data.person.msStatusMood.author.profileUrl }}"> {{ profile_data.person.msStatusMood.author.profileUrl  }}</a><p>
            <p>Name: <strong> {{ profile_data.person.displayName }} </strong> </p> 
            <p>Gender: <strong> {{ profile_data.person.gender }} </strong> </p>
            <p>Age: <strong> {{ profile_data.person.age }} </strong> </p>
            <p>Marital Status: <strong> {{ profile_data.person.maritalstatus }} </strong> </p>
            <p>City: <strong> {{ profile_data.person.currentLocation.locality }} </strong> </p>
            <p>Postal Code: <strong> {{ profile_data.person.currentLocation.postalCode }} </strong> </p>
            <p>Region: <strong> {{ profile_data.person.currentLocation.region }} </strong> </p>
            <p>Country: <strong> {{ profile_data.person.currentLocation.country }} </strong> </p>
            
            
        </div>
        <div id="friendsTabContent">
     	{% for friend in friends_data.entry %}
			  <a href='{{friend.person.profileUrl}}'>
			  <img id='{{friend.person.displayName}}'   src='{{friend.person.thumbnailUrl}}' title='{{ friend.person.displayName }}'  border='0'/>
			  </a>
			{% endfor %}
        </div>
        <div id='albumsTabContent'>
            	{% for album in albums_data.entry %}
			       
			  <img id=' album.album.caption'   src='{{album.album.thumbnailUrl}}' title='{{ album.album.caption }}'  border='0'/>
			  
			   {% endfor %}
        </div>
    </div>
</div>

<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("MySpaceTabs");

// Friends Tab Image Loader
var tabTwoImageGroup = new YAHOO.util.ImageLoader.group('friendsTab', 'mouseover');

{% for friend in friends_data.Friends %}
tabTwoImageGroup.registerSrcImage("{{friend.name}}", "{{ friend.image }}");
{% endfor %}

tabTwoImageGroup.addTrigger('friendsTab', 'focus');
tabTwoImageGroup.name = 'tab_two_group';

// Albums Tab Image Loader

</script> 
{% endif %}

</body>
</html>
